fix(web): stop vertical stacking on narrow chat error cards - #6295
Conversation
Move the long Open Design Cloud switch CTA into UserActionCard footer actions (same shell as run-recovery), add a card-width container query so head actions reflow when ChatPane is narrow, and soften title wrapping so CJK copy no longer renders one character per line.
lefarcen
added
size/S
mrcfps
left a comment
mrcfps
left a comment
There was a problem hiding this comment.
@lefarcen I reviewed all four changed files and verified the narrow-layout fix end to end: the long hosted-agent CTA now uses the established footer action row, the card-scoped container query reflows remaining head actions without depending on viewport width, and the regression test covers the CTA placement. The live Static gate and Web workspace tests are passing; local guard/typecheck/test reruns were unavailable only because this prepared reviewer worktree has no installed dependencies. Thanks for the focused, well-explained fix—this is a thoughtful improvement for localized narrow chat layouts. 🙌
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.
|
The narrow-layout write-up is clear, and the validation section already covers the targeted test run. One body item is still missing for this Related: #3083 and #5308 (prior AMR guidance work). FYI for context. |
Visual regression reviewHead:
0 changed · 0 unchanged · 47 new without baseline · 0 failed New cases without baselines
27 additional new case(s) omitted from this comment. Visual diff is advisory only and does not block merging. |
2 participants
Why
In a narrow ChatPane, the AMR “模型调用失败，当前任务已暂停” recovery card rendered its title as a vertical one-character stack. Head layout is a 3-column grid (
icon | title | actions); a long CTA inactionstookautowidth and left the title track ~1 CJK character wide, andoverflow-wrap: anywherebroke every character onto its own line.What users will see
Surface area
Screenshots
Before: title characters stacked vertically when chat is narrow.
After: title wraps horizontally; CTA in footer.
Validation
pnpm exec vitest run -c vitest.config.ts tests/components/AmrGuidance.test.tsx tests/components/UserActionCard.test.tsx(5 passed)